<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>落地分布</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/index.css"/>
    <link rel="stylesheet" href="../../styles/icon/iconfont.css"/>
    <link rel="stylesheet" href="../../styles/pages.css"/>
</head>
<body>
<div class="dashboard-container" id="category-app">
    <div class="container">
        <div
                class="tableBar"
                style="display: inline-block"
        >
            <el-select v-model="endId" filterable placeholder="请选择对接网关" @change="handleQuery" clearable>
                <el-option
                        v-for="item in endList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button
                    v-if="endId != null && endId != ''"
                    type="primary"
                    @click="distributeNumber()"
            >
                + 自动分配号码
            </el-button>
            <el-button
                    v-if="endId != null && endId != ''"
                    type="primary"
                    @click="addConcurrency()"
            >
                + 新增并发
            </el-button>
            <el-button
                    v-if="endId != null && endId != ''"
                    type="primary"
                    @click="importNumber()"
            >
                + 导入号码
            </el-button>
        </div>
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
                @sort-change="handleSortChange"
        >
            <el-table-column
                    prop="company"
                    label="公司名"
            />
            </el-table-column>
            <el-table-column
                    prop="ip"
                    label="IP地址"
            />
            </el-table-column>
            <el-table-column
                    prop="frontGroup"
                    label="分组"
            />
            </el-table-column>
            <el-table-column
                    prop="sumNumber"
                    label="号码总数"
            />
            </el-table-column>
            <el-table-column
                    prop="numberCounts"
                    label="分配号码数"
            />
            <template slot-scope="scope">
                <el-link type="info" @click="queryNumbers(scope.row)">{{scope.row.numberCounts}}</el-link>
            </template>
            </el-table-column>
            <el-table-column
                    prop="percentage"
                    label="百分比"
            />
            </el-table-column>
            <el-table-column
                    v-if="endId != null && endId != ''"
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="small"
                            class="blueBug"
                            @click="updateNumber(scope.row)"
                    >
                        修改号码
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
    <el-dialog
            :title="distributionParams.title"
            :visible.sync="distributionParams.autoDialogVisible"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
                :model="distributionParams"
                ref="distributionParams"
        >
            <el-form-item
                    label="需求并发："
                    prop="maxLines"
            >
                <el-input
                        v-model="distributionParams.maxLines"
                        placeholder="请输入需求并发数"
                        maxlength="14"
                />
            </el-form-item>
            <el-form-item
                    label="落地分组："
                    prop="frontGroup"
            >
                <el-select v-model="distributionParams.frontGroup" filterable placeholder="请选择落地分组"
                           @change="handleQuery" clearable>
                    <el-option
                            v-for="item in frontGroupList"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="medium"
                @click="handleClose()"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
            :title="distributionParams.title"
            :visible.sync="distributionParams.handDialogVisible"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
                :model="distributionParams"
                ref="distributionParams"
        >
            <el-form-item
                    label="号码个数："
                    prop="numberCounts"
            >
                <el-input
                        v-model="distributionParams.numberCounts"
                        placeholder="请输入需要号码个数"
                        maxlength="14"
                />
            </el-form-item>
        </el-form>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="medium"
                @click="handleClose()"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
            :title="distributionParams.title"
            :visible.sync="distributionParams.importDialogVisible"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
                :model="distributionParams"
                ref="distributionParams"
        >
            <el-form-item
                    label="A号码清单:"
                    prop="numberString"
            >
                <el-input
                        v-model="distributionParams.numberString"
                        placeholder="请输入A号码"
                        type="textarea"
                        :rows="10"
                />
            </el-form-item>
        </el-form>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="medium"
                @click="handleClose()"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
            :title="distributionParams.title"
            :visible.sync="distributionParams.addDialogVisible"
            width="30%"
            :before-close="handleClose"
    >
        <el-form
                class="demo-form-inline"
                label-width="100px"
                :model="distributionParams"
                ref="distributionParams"
        >
            <el-form-item
                    label="新增并发数："
                    prop="concurrency"
            >
                <el-input
                        v-model="distributionParams.concurrency"
                        placeholder="请输入新增并发数"
                        maxlength="14"
                />
            </el-form-item>
            <el-form-item
                    label="落地分组："
                    prop="frontGroup"
            >
                <el-select v-model="distributionParams.frontGroup" filterable placeholder="请选择落地分组"
                           @change="handleQuery" clearable>
                    <el-option
                            v-for="item in frontGroupList"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="medium"
                @click="handleClose()"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
    </el-dialog>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/element-ui-2.13.0/lib/index.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/query.js"></script>
<script>
    new Vue({
        el: '#category-app',
        data() {
            return {
                indexPage: '../../index/index.html',
                action: '',
                counts: 0,
                pageNum: 1,
                pageSize: 10,
                tableData: [],
                endId: '',
                concurrency: '',
                endList: [],
                frontGroupList: [],
                numberString: '',
                frontGroup: '',
                type: '',
                distributionParams: {
                    'handDialogVisible': false,
                    'autoDialogVisible': false,
                    'addDialogVisible': false,
                    'title': '新增号码',
                    'numberCounts': '',
                    'concurrency': '',
                    'percentage': '',
                    'company': '',
                    'frontGroup': '',
                    'ip': '',
                    'id': '',
                    'endId': '',
                    'maxLines': '',
                    'numberString': ''
                }
            }
        },
        computed: {},
        created() {
            if (localStorage.getItem("endId") != null && localStorage.getItem("endId") != '') {
                this.endId = parseInt(localStorage.getItem("endId"));
            }
            this.init();
            window.localStorage.clear();
        },
        mounted() {
        },
        methods: {
            updateNumber(row) {
                this.distributionParams.id = row.id;
                this.distributionParams.endId = this.endId;
                this.type = 'hand';
                this.distributionParams.title = "修改号码个数"
                this.distributionParams.handDialogVisible = true;
            },
            queryNumbers(row) {
                localStorage.setItem("frontId", row.id);
                localStorage.setItem("endId", this.endId);
                localStorage.setItem("jump", '8');
                parent.location.href = this.indexPage;
            },
            importNumber() {
                this.distributionParams.endId = this.endId;
                this.type = 'import';
                this.distributionParams.title = "导入A号码"
                this.distributionParams.importDialogVisible = true;
            },
            addConcurrency(){
                this.distributionParams.endId = this.endId;
                this.type = 'add';
                this.distributionParams.title = "新增并发"
                this.distributionParams.addDialogVisible = true;
            },
            distributeNumber() {
                this.distributionParams.endId = this.endId;
                this.type = 'auto';
                this.distributionParams.title = "自动分配号码"
                this.distributionParams.autoDialogVisible = true;
            },
            async init() {
                this.endList = []
                await queryEndProperty({}).then(res => {
                    res.result.forEach(item => {
                        let arr = {
                            value: item.id,
                            label: item.end
                        };
                        this.endList.push(arr);
                    });
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                });
                this.frontGroupList = []
                await queryFrontGroup({}).then(res => {
                    res.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.frontGroupList.push(arr);
                    });
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                });
                await queryFrontDistribution({
                    'endId': this.endId,
                    'pageNum': this.pageNum,
                    'pageSize': this.pageSize
                }).then(res => {
                    if (String(res.code) == 200) {
                        this.tableData = res.result.data
                        this.counts = Number(res.result.total)
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                });
            },
            submitForm(st) {
                this.$refs[`distributionParams`].validate((valid) => {
                    if (valid) {
                        const distributionParams = this.distributionParams
                        if (this.type == 'hand') {
                            updateNumber(distributionParams).then(res => {
                                if (res.code === 200) {
                                    this.$message.success(res.msg)
                                    if (!st) {
                                        this.distributionParams.handDialogVisible = false
                                        this.distributionParams.numberCounts = ''
                                    }
                                    this.handleQuery()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        } else if (this.type == 'auto') {
                            autoUpdateNumber(distributionParams).then(res => {
                                if (res.code === 200) {
                                    this.$message.success(res.msg)
                                    if (!st) {
                                        this.distributionParams.autoDialogVisible = false
                                        this.distributionParams.maxLines = ''
                                        this.distributionParams.frontGroup = ''
                                    }
                                    this.handleQuery()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }else if (this.type == 'import'){
                            importNumber(distributionParams).then(res => {
                                if (res.code === 200) {
                                    this.$message.success(res.msg)
                                    if (!st) {
                                        this.distributionParams.importDialogVisible = false
                                        this.distributionParams.numberString = ''
                                    }
                                    this.handleQuery()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }else if (this.type == 'add'){
                            addNumber(distributionParams).then(res => {
                                if (res.code === 200) {
                                    this.$message.success(res.msg)
                                    if (!st) {
                                        this.distributionParams.addDialogVisible = false
                                        this.distributionParams.concurrency = ''
                                        this.distributionParams.frontGroup = ''
                                    }
                                    this.handleQuery()
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }
                    }
                });
            },
            handleQuery() {
                this.pageNum = 1;
                this.init();
            },
            //切换页面大小
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            //换页
            handleCurrentChange(val) {
                this.pageNum = val
                this.init()
            },
            // 关闭弹窗
            handleClose() {
                this.distributionParams.handDialogVisible = false;
                this.distributionParams.autoDialogVisible = false
                this.distributionParams.addDialogVisible = false;
                this.$refs['distributionParams'].resetFields();
            },
        }
    })
</script>
</body>
</html>